<!DOCTYPE html>
<style>
input {
    color: #757575;
}

input.red {
    color: rgb(100, 0, 0);
}

.blue {
    color: blue;
}

.prefixed-unprefixed {
    color: red;
}
.prefixed-unprefixed {
    color: blue;
}

.unprefixed-prefixed {
    color: blue;
}
.unprefixed-prefixed {
    color: red;
}
</style>
This tests that you can set the placeholder text color.

<div>
Default style:
<input value="default">
<input value="default disabled">
</div>

<div>
::-webkit-input-placeholder:
<input class="red" value="text">
<input class="red" type="search" value="search">
<input class="red" type="text" value="password">
<input class="red" disabled value="disabled text">
</div>

<div>
::placeholder:
<input class="blue" value="text">
<input class="blue" type="search" value="search">
<input class="blue" type="text" value="password">
<input class="blue" disabled value="disabled text">
</div>

<div>
Both:
<input class="prefixed-unprefixed" value="unprefixed">
<input class="unprefixed-prefixed" value="prefixed">
</div>
